<template>
    <div style="padding:30px;">
        <el-alert :closable="false" title="">
            <transition name="fade-transform" mode="out-in">
                <template>
                    <div>
                        <EditButton @add="onAdd" @refresh="onRefresh" @search="onSearch" :listData="getList"
                            :filterFieldName="getFields"></EditButton>
                        <el-table v-loading="listLoading" :data="list" style="width: 100%">
                            <!-- <el-table-column prop="staffId" label="ID">
                            </el-table-column> -->
                            <el-table-column prop="staffName" label="用户名">
                            </el-table-column>
                            <el-table-column prop="staffPass" label="密码">
                            </el-table-column>
                            <el-table-column prop="sex" label="性别">
                            </el-table-column>
                            <el-table-column label="角色">
                                <template slot-scope="scope">
                                    <span>{{ getRole(scope.row.roleId) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">
                                    <span>{{ getStatus(scope.row.status) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <EditTableButton @click-button="handleClick" :data="scope.row">
                                    </EditTableButton>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- <edit-form @sendUpdate="update" ref="editForm"></edit-form> -->
                        <edit-multiplay-form @sendUpdate="update" ref="editForm"></edit-multiplay-form>
                    </div>
                </template>
            </transition>
        </el-alert>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import EditForm from "@/views/common/edit-form.vue"
import { FormDataUtils, SysUserTouchType } from '@/views/common/data/ICommon';
import EditTableButton from "@/views/common/edit-table-button.vue"
import EditButton from "@/views/common/edit-button.vue"
import { ISysRoleModel, ISysUsersModel } from '@/api/types';
import { SysUserModule } from '@/store/modules/sys_user';
import { RolesModule } from '@/store/modules/roles';
import EditMultiplayForm from '@/views/common/edit-multiplay-form.vue';


@Component({
    name: 'Room',
    components: {
        EditForm,
        EditTableButton,
        EditButton,
        EditMultiplayForm
    }
})


export default class extends Vue {
    public allList: Array<ISysUsersModel> = []
    public list: Array<ISysUsersModel> = []
    public listLoading: boolean = false
    scope: any;
    $refs: any;
    public optType: string = ""
    // public attrs = ["sysUser.role_allocation", "common.delete"];
    public roles: Array<ISysRoleModel> = []
    public statusList = [{
        id: 1,
        name: "正常"
    }, {
        id: 2,
        name: "删除"
    }, {
        id: 3,
        name: "停用"
    }
    ];

    created() {
        this.init()
    }

    public getList() {
        return this.allList;
    }
    public getFields() {
        return "staffName,sex"
    }

    //操作相关处理
    public async handleClick(type: SysUserTouchType, row: any) {
        if (type === SysUserTouchType.DELETE) {
            SysUserModule.deleteSysUsers(row.staffId).then(v => {
                if (v) {
                    this.list = this.list.filter(value => {
                        return value.staffId != row.staffId
                    })
                }
            });
            return;
        }
        this.optType = type;
        if (type === SysUserTouchType.SEE || type === SysUserTouchType.EDIT) {
            let keys = Object.keys(row)
            let data = await FormDataUtils.getFormsMultiplay(row, "sysUser", (key: string) => {
                return this.$t(key);
            }, type === SysUserTouchType.SEE ? keys : ['staffId'], ["registerTime", "staffId", 'avatar'],
                [{
                    filed: "roleId", key: "roleId", value: "roleName", isMultiplay: false, getSelectFunc: async () => {
                        return new Promise((r, j) => {
                            r(this.roles)
                        })
                    }
                }, {
                    filed: "status", key: "id", value: "name", isMultiplay: false, getSelectFunc: async () => {
                        return new Promise((r, j) => {
                            r(this.statusList)
                        });
                    }
                }
                ])
            this.$refs.editForm.showForm(data, type === SysUserTouchType.EDIT)
        } else if (type === SysUserTouchType.ADD) {
            let mod: ISysUsersModel = {
                staffId: 0,        // 人员唯一标识(不可变)
                staffName: "",// 人员名称
                sex: "",// 姓别
                avatar: "",//头像
                staffPass: "",
                status: 0, // 状态:0:正常,1:删除,2:停用
                roleId: 0,
                // 所属科室列表,一个人员可属于多个科室 DepId 科室id DepCode 所属科室编码 DepName string 所属科室名称 Default int  是否默认所属,0:否，1：是
                registerTime: "" // 注册时间
            }
            let data1 = await FormDataUtils.getFormsMultiplay(mod, "sysUser", (key: string) => {
                return this.$t(key);
            }, [], ["registerTime", "staffId", 'avatar'], [{
                filed: "roleId", key: "roleId", value: "roleName", isMultiplay: false, getSelectFunc: async () => {
                    return new Promise((r, j) => {
                        r(this.roles)
                    })
                }
            }, {
                filed: "status", key: "id", value: "name", isMultiplay: false, getSelectFunc: async () => {
                    return new Promise((r, j) => {
                        r(this.statusList)
                    });
                }
            }
            ])
            this.$refs.editForm.showForm(data1, true)
        } else if (type == SysUserTouchType.RoleAllocation) {
            alert("开发中")
        }
    }

    //更新成功
    public update(obj: any) {
        console.error(obj, this.optType);
        SysUserModule.updateSysUsers(obj).then(v => {
            console.error(v)
            if (v === 1) {//成功了
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].staffId === obj.staffId) {
                        this.list[i].staffName = obj.staffName
                        this.list[i].sex = obj.sex
                        this.list[i].status = obj.status
                        this.list[i].avatar = obj.avatar
                        this.list[i].staffPass = obj.staffPass
                        this.list[i].roleId = obj.roleId
                        break;
                    }
                }
            } else if (!obj.staffId && v) {
                obj.staffId = v;
                this.list.push(obj);
            }
        }).catch(ex => {
            console.error(ex);
        })
    }

    public onAdd() {
        this.handleClick(SysUserTouchType.ADD, null);
    }

    public onRefresh() {
        console.error("onClick onRefresh");
    }

    public onSearch(val: any) {
        this.list = val
    }
    //获取角色
    public getRole(roleId: number) {
        let arr = this.roles.filter(value => {
            return value.roleId == roleId
        })
        if (arr && arr.length > 0) {
            return arr[0].roleName
        }
        return "无"
    }
    // 状态:0:正常,1:删除,2:停用
    public getStatus(status: number) {
        if (status == 2) {
            return "已删除"
        }
        if (status == 1) {
            return "正常"
        }
        if (status == 3) {
            return "已停用"
        }
    }


    public async init() {
        this.list = [];
        this.listLoading = true

        this.roles = await RolesModule.getRoles();

        let result: any = await SysUserModule.getSysUsers()
        this.list = result
        this.allList = result
        setTimeout(() => {
            this.listLoading = false
        }, 0.5 * 1000)
    }
}
</script>